
import { _nav, _append, _layout, _query, _events, _style, _closest } from '../ui/index.js'
import config from '../data/nav_url.js'

let app = document.getElementById("app")

let header = _layout(".header", app)
_layout(".main .aside", app)
let screen = _layout(".main .screen-viewer", app)
let inspector = _layout(".main .inspector", app)
let showInspector = true
_events(screen, (e) => {
    let el = e.target
    let svg = _closest(el, 'svg') || _closest(el,'canvas')
    if (!svg) return
    if (showInspector) {
        _style(inspector, {
            right: 0
        })
        showInspector = false
    } else {
        _style(inspector, {
            right: null
        })
        showInspector = true
    }
})
_events(document.body, {
    mousedown: (e) => {
        // console.log(e.target)
        let el = e.target
        let inScreen = _closest(el, ".screen-viewer") || _closest(el, ".inspector")
        if (inScreen) return

        _style(inspector, {
            right: null
        })
        showInspector = true
    }
})
let nav = _nav(config.menu, {
    ...config,
    root: app
})
_append(header, nav)